import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { NavLink } from "react-router-dom";
import { getSongStyles } from "@/pages/discover/d-pages/songs/store/actionType";
import { SongPopoverWrap } from "./style";

export default memo(function SongBox(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getSongStyles());
  }, [dispatch]);

  const state = useSelector(
    (state) => ({
      sub: state.getIn(["songs", "songSub"]),
      allStyle: state.getIn(["songs", "songAllStyle"]),
      categories: state.getIn(["songs", "songCategories"]),
    }),
    shallowEqual
  );

  return (
    <SongPopoverWrap onClick={props.stopMaoPao} show={props.isShow}>
      <div className="a_l">
        <div className="check_line button2">
          <div className="all-style button2">
            <NavLink
              to={{
                pathname: "/discover/songs",
              }}
              onClick={props.closePopover}
            >
              全部风格
            </NavLink>
          </div>
        </div>
      </div>
      <div>
        <div className="style-box-content">
          {Object.keys(state.categories).map((item, index) => {
            return (
              <div className="categories-box" key={index}>
                <span className="style-name">
                  {state.categories[item]}
                  {item == 0 ? (
                    <i className="category-icon imgIcon category-icon-one"></i>
                  ) : item == 1 ? (
                    <i className="category-icon imgIcon category-icon-two"></i>
                  ) : item == 2 ? (
                    <i className="category-icon imgIcon category-icon-three"></i>
                  ) : item == 3 ? (
                    <i className="category-icon imgIcon category-icon-four"></i>
                  ) : item == 4 ? (
                    <i className="category-icon imgIcon category-icon-five"></i>
                  ) : (
                    ""
                  )}
                </span>
                <div className="category-div">
                  {state.sub.map((itema, indexa) => {
                    return itema.category == item ? (
                      <NavLink
                        onClick={props.gotoOne}
                        to={{
                          pathname: "/discover/songs/" + itema.name,
                          query: { cat: itema.name },
                        }}
                        className="category-name"
                        key={itema.name}
                      >
                        <span
                          onClick={props.closePopover}
                          className="cursor-name"
                        >
                          {itema.name}
                        </span>
                        <span className="category-line">|</span>
                      </NavLink>
                    ) : (
                      ""
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </SongPopoverWrap>
  );
});
